<div id="form<?php echo $uniqid;?>" style="padding-top: 20px">
    <el-form :model="params" method="post" size="small" label-width="140px" @submit.native.prevent label-position="right">
        <el-form-item label="标题：">
            <el-input v-model="params.title" size="small" style="width: 500px"></el-input>
            <div class="fonttype_exam" :style="{'color':params.titlecolor}">{{params.title?params.title:'标题字体样式示例：新闻资讯新闻资讯新闻资讯新闻资讯'}}</div>
        </el-form-item>
        <el-form-item label="标题字体样式：">
            <el-select v-model="params.fonttype" style="max-width: 140px;" @change="fontTypeChange" size="mini" placeholder="请选择样式" popper-class="zindex_popper">
                <el-option :value='0' :key='0' label="正常字体"></el-option>
                <el-option
                        v-for="(item,index) in fontType"
                        :key="item"
                        :label="item"
                        :value="index">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标题颜色：">
            <el-color-picker v-model="params.titlecolor" color-format="hex" popper-class="zindex_popper"></el-color-picker>
        </el-form-item>
        <el-form-item label="关键字：">
            <el-input v-model="params.keywords" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="缩略图：">
            <template slot-scope="scope">
                <div class="display-flex">
                    <div class="img-box" v-if="params.thumbnail.length">
                        <a class="linkWrapper" target="_blank" :href="params.thumbnail" title="查看原图">
                            <img height="70px" :src="params.thumbnail+'?imageView2/1/w/100/h/100'"></a>
                        <div class="img-box-del" @click="deleteImages">
                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                        </div>
                    </div>
                    <div class="add-image-button" v-if="params.thumbnail.length === 0">
                        <a class="btn btn-default btn-lg" @click="uploadBox('newsEditVm.params.thumbnail')" href="javascript:void(0);">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </div>
                </div>
            </template>
        </el-form-item>
        <el-form-item label="作者：">
            <el-input v-model="params.author" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="新闻来源：">
            <el-input v-model="params.copyfrom" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="新闻来源网址：">
            <el-input v-model="params.copyfromurl" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="虚拟阅读数：">
            <el-input-number v-model="params.v_hits" size="small" :min="0" :step="100" style="width: 200px"></el-input-number>
        </el-form-item>
        <el-form-item label="状态：">
            <el-switch
                    style="display: block"
                    v-model="params.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="启用"
                    inactive-text="禁用"
                    :active-value="1"
                    :inactive-value="0">
            </el-switch>
        </el-form-item>
        <el-form-item label="推荐置顶：">
            <el-switch
                    style="display: block"
                    v-model="params.recommend"
                    active-text="置顶"
                    inactive-text="不置顶"
                    :active-value="1"
                    :inactive-value="0">
            </el-switch>
        </el-form-item>
        <el-form-item label="排序：">
            <el-input-number v-model="params.sortorder" size="small" :min="0" :step="100" style="width: 200px"></el-input-number>
        </el-form-item>
        <el-form-item label="新闻内容：">
            <script id="newsEditor" name="content" type="text/plain">{{ params.content }}</script>
        </el-form-item>
    </el-form>
</div>
<script>
    var newsEditVm = new Vue({
        el: '#form<?php echo $uniqid;?>',
        data: {
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            fontType: JSON.parse('<?php echo addslashes($fontType);?>'),
        },
        mounted(){
            this.init();
        },
        methods: {
            init() {
                let that = this;
                if('undefined' === typeof (that.params.id)){
                    that.params.titlecolor = '#3F3F3F';
                    that.params.sortorder = 500;
                }
            },
            deleteImages(){
                this.params.thumbnail = '';
            },
            fontTypeChange:function (val) {
                let ele = $("div.fonttype_exam");
                switch (val) {
                    case '1':
                        ele.removeClass('oblique');
                        if(! ele.hasClass('bold')){
                            ele.addClass('bold');
                        }
                        break;
                    case '2':
                        ele.removeClass('bold');
                        if(! ele.hasClass('oblique')){
                            ele.addClass('oblique');
                        }
                        break;
                    case '3':
                        if(! ele.hasClass('bold')){
                            ele.addClass('bold');
                        }
                        if(! ele.hasClass('oblique')){
                            ele.addClass('oblique');
                        }
                        break;
                    default:
                        ele.removeClass('bold').removeClass('oblique');
                }
            },
            submit: function () {
                this.params.content= newsEditorUm.getContent();
                let act = this.params.id ? 'edit' : 'add';
                $.post('/admin/news/' + act, newsEditVm.params, function (data) {
                    if (data.ret === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#form<?php echo $uniqid;?>').form('clear');
                        $("#newsManageDlg").dialog('close');
                        newsManageload();
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });
    if (typeof(newsEditorUm) != 'undefined') {
        newsEditorUm.destroy();
    }
    var newsEditorUm = UE.getEditor('newsEditor', {initialFrameHeight: 400, autoHeightEnabled: false});
    $(function () {
        $('#newsEditsubmit').click(function (data) {
            newsEditVm.submit();
        });
    });
</script>
<style>
    .edui-editor {
        line-height: 20px;
    }
    .zindex_popper{
        z-index: 20000 !important;
    }

    .fonttype_exam{
        margin-left: 20px;
        font-size: 14px;
        margin-top: 10px;
    }
    .fonttype_exam.bold{
        font-weight: bold;
    }

    .fonttype_exam.oblique{
        font-style: oblique;
    }
</style>
